<html>
<body>
<script src="js/echarts.js"></script>
<script src="js/axios-0.18.0.js"></script>

<div id="div" style="width: 100%;height: 900px">

</div>

<script>
    // 初始化一个图表对象
    let myecharts = echarts.init(document.getElementById("div"));
    // 准备数据
    let option = {
        title: {
            text: '三期学生周测平均分'
        },
        tooltip: {},
        xAxis: {
            data: [],
            axisLabel: {
                // 旋转刻度标签，避免重叠
                rotate: -60,
                // 强制显示所有标签
                interval: 0,
                // 增大标签与轴线的距离
                margin: 5
            }
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: []
            }
        ]
    };

    axios.get('studentScore/avg').then(res=>{
        //对上面的 option 对象中的  legend的data进行修改,和series的data进行修改
        let map = res.data;
        option.series[0].data = map.scores;
        option.xAxis.data = map.names;
        // 将数据填充到图表对象中
        myecharts.setOption(option);
    })
</script>

</body>
</html>